<template>
  <div id="login_home">
    <div class="login_bg1"></div>
    <div class="login_bg2"></div>
    <div class="login_content">
      <div class="login_title">
        <span class="title_point"> </span>
        <span class="title_point"> </span>
        <span class="title_point"> </span>
        <span class="title_point"> </span>
        <span class="title_point"> </span>
        <span class="title_point"> </span>
        <div class="title">超声医学质量控制系统</div>
      </div>
      <div class="login_select">
        <a-row id="row_login" type="flex" justify="center">
          <a-col class="col_login">
            <div class="login_box_empty"></div>
            <div class="login_box" v-if="activeTab === 'login'">
              <AccountLogin @change-tab="changeTab"></AccountLogin>
            </div>
            <div class="login_box" v-if="activeTab === 'forgot_password'">
              <!-- <ForgotPassword @changeTab="changeTab"></ForgotPassword> -->
            </div>
          </a-col>
          <a-col class="col_canvas">
            <div class="title" style="font-size: 24px; padding-top: 20px">Welcome!</div>
            <div class="title" style="font-size: 17px; padding-left: 40px">
              超声医学质量智能监控平台
            </div>
            <div class="login_canvas">
              <img src="@/assets/login_bg.png" style="" alt="登录页图像" />
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="login_footer">脚</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import AccountLogin from './account_login.vue'
// import ForgotPassword from './forgot_password.vue'
import { ref } from 'vue'
const activeTab = ref('login')
function changeTab(key: string) {
  activeTab.value = key
}
</script>
<style lang="scss" scoped>
#login_home {
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  @include w-h-cover();
  @include background_image('login_bg_img');
  .login_bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    width: 40%;
    height: 70%;
    clip-path: circle(100% at 0% -30%);
    @include background_color('login_bg_img1');
  }
  .login_bg2 {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    width: 70%;
    height: 90%;
    clip-path: circle(90% at 100% 150%);
    @include background_color('login_bg_img2');
  }
  .login_title {
    text-align: center;
    position: relative;
    z-index: 6;
    .title {
      font-weight: bold;
      font-family: fangsong;
      font-size: 1.5vw;
      letter-spacing: 3px;
      @include font_color('login_title_cl');
    }
    .title_point {
      display: inline-block;
      width: 0.8vw;
      height: 0.8vw;
      border-radius: 100%;
      margin: 12px 0px 12px;
      &:nth-child(2n-1) {
        margin-left: 10px;
        animation: blink 2s infinite;
        @include background_color('login_point_odd');
      }
      &:nth-child(2n) {
        margin-left: 10px;
        animation: blink 3s infinite;
        @include background_color('login_point_even');
      }
      &:nth-child(1) {
        margin-left: -10px;
      }
    }
    @media screen and (max-width: 1000px) {
      .title {
        font-size: 16px;
      }
      .title_point {
        width: 12px;
        height: 12px;
      }
    }
    @keyframes blink {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 0.8;
      }
      50% {
        opacity: 0.5;
      }
      75% {
        opacity: 0.8;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .login_content {
    @include w-h-cover();
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .login_select {
    flex: 1;
    position: relative;
    #row_login {
      height: 480px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
      z-index: 5;
    }
    .col_canvas {
      height: 520px;
      width: 600px;
      position: absolute;
      left: calc(50% - 500px);
      top: -20px;
      z-index: 6;
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      clip-path: circle(500px at 100px 260px);
      @include background_color('login_canvas_bg');
      .title {
        font-weight: 900;
        font-family: fangsong;
        padding-left: 20px;
        @include font_color('login_title_cl');
      }
      .login_canvas {
        flex: 1;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          position: absolute;
          width: 400px;
        }
      }
    }
    .col_login {
      height: 100%;
      width: 1000px;
      border-radius: 10px;
      display: flex;
      @include background_color('login_box_bg');
      .login_box {
        width: 400px;
        height: 100%;
        padding: 10px;
        position: relative;
        z-index: 7;
        @include background_color('login_box_bg');
      }
      .login_box_empty {
        flex: 1;
      }
    }
    @media screen and (max-width: 1000px) {
      .col_canvas {
        left: 0px;
      }
    }
    @media screen and (max-width: 600px) {
      .col_canvas {
        width: 100%;
        left: 0px;
      }
      .col_login {
        width: 100%;
        .login_box {
          width: 100%;
        }
      }
    }
  }
  .login_footer {
    z-index: 6;
  }
}
</style>
